<template>
  <div class="ykdetailed">
    <!-- <van-cell-group>
			<van-cell value="油卡明细" />
		</van-cell-group> -->
		<h2>油卡明细</h2>
		<div class="ykdetails">
			<div class="ykdetails_m">
				<h3>中石化油卡充值卡</h3>
				<ul>
					<li><span>订单号</span><span>{{orderdetail.orderNo}}</span></li>
					<li><span>兑换时间</span><span>{{orderdetail.exchangeTime}}</span></li>
					<li><span>兑换权益总量</span><span>{{orderdetail.totalInterests}}</span></li>
					<li><span>充值卡数量</span><span>{{orderdetail.total}}</span></li>
					<li><span>兑换状态</span><span class="red">{{orderdetail.exchangeStatus}}</span></li>
				</ul>
				<p v-if="orderdetail.total != 0 " @click="ykInFo">查看详情</p>
			</div>
		</div>
  </div>
</template>

<script>

import { getInFo } from "../../../api/ykdetails.js";
import ykImg from '../../../assets/img/yk.jpg';
import Instructions from '../../../assets/img/instructions.jpg';
export default {
  name: 'ykdetailed',
  data() {
    return {
			show: false,
			checked: false,
			Instructions:Instructions,
			InfoParameter:{
				exchangeId: this.$route.query.exchangeId,
				exchangeType: 0,
				id: this.$route.query.id,
				status: ''
			},
			orderdetail:[]
    };
  },
	created() {
		this.detailsFun();
	},
  methods: {
		detailsFun(){
			if(this.$route.query.status === '兑换'){
				this.InfoParameter.status = 2;
			}
			if(this.$route.query.status === '失效'){
				this.InfoParameter.status = 0;
			}
			if(this.$route.query.status === '收益'){
				this.InfoParameter.status = 1;
			}
			console.log(this.$route.query.id);
			getInFo(this.InfoParameter).then((res) => {
				if(res.status === 200) {
					this.orderdetail = res.data;
				}
			}).catch(error => {
        if (error.status !== 100 && error.status !== 102 ) {
          this.$toast.fail(error.message);
        }
      })
		},
		ykInFo() {
			console.log(this.orderdetail)
			this.$router.push({name: 'ykdetails', query: {exchangeId: this.$route.query.exchangeId}});
		}
  }
};
</script>

<style lang="less" scoped>
.ykdetailed{
	h2{
		// height: 45px;line-height: 45px;font-size: 18px;text-align: center;color: #333;
		background: #ffffff;
		text-align: center;
      height:50px;
      font-size:16px;
      font-family:PingFang SC;
			// font-weight:300;
			// font-weight: normal;
      line-height:50px;
      color:#333333;
      opacity:1;
			border-bottom: 1px solid #E6F1F4;
			width: 100%;z-index: 100;
			position: fixed;

	}
}
.ykdetails {
	background: #F2F2F2;padding:20px 10px;
	position: fixed;
	background: #F2F2F2;
	height: 100%;width: calc(100% - 20px);top: 50px;
	.ykdetails_m{
		background: #fff; border-radius: 5px;
		h3{height: 60px;line-height: 60px;font-size: 18px;color: #333333;text-align: center;border-bottom: 1px solid #E6F1F4;font-weight:300;}
		ul{
			padding: 20px;
			li{
				height: 25px;line-height: 25px;
				span{color: #888888;}
				span:nth-of-type(2){float: right;color: #333333;}
			}
		}
		p{background:#FAFAFA;height:45px; line-height: 45px; text-align: center;border-top:1px solid #E6F1F4;border-radius: 0 0 5px 5px;}
	}
}
.red {color: #F80606 !important;}
.instructions {width: 100%;display: block;margin: 0 auto;margin-bottom: 50px;padding-bottom:35px;border-bottom: 1px solid #EFEFEF;}
.span_test {margin-left: 20px;color: #1A8EBF;margin-left: 5px;}
</style>
